<template>
  <div class="Store">
    <el-dialog
      :before-close="handelClose"
      :modal="false"
      :visible.sync="visible"
      width="900px"
      @close="handelClose"
    >
      <div slot="title">
        <b class="def-b">选择门店</b>
      </div>
      <el-form ref="storeForm" :model="storeForm">
        <div class="ele-key-search">
          <div class="left">
            <el-button @click="resetForm">全部</el-button>
            <!--                <city-select ref="citySelect" v-model="storeForm.address" @change="changedAddress" />-->
            <el-select
              ref="province"
              v-model="storeForm.provinceCode"
              style="margin-left: 10px"
              :disabled="true"
              @change="handelProvince"
            >
              <el-option
                v-for="(item, index) in pca.province"
                :key="index"
                :value="item.code"
                :label="item.name"
              /> </el-select>
            <el-select
              v-model="storeForm.cityCode"
              style="margin-left: 10px"
              :disabled="true"
              @change="handelCity"
            >
              <el-option
                v-for="(item, index) in pca.forCity"
                :key="index"
                :value="item.code"
                :label="item.name"
              /> </el-select>
            <el-select
              v-model="storeForm.areaCode"
              style="margin-left: 10px"
              @change="handelArea"
            >
              <el-option
                v-for="(item, index) in pca.forArea"
                :key="index"
                :value="item.code"
                :label="item.name"
              /> </el-select>
          </div>
          <div class="right">
            <el-input
              v-model="storeForm.keySearch"
              style="width:200px"
              maxlength="20"
              placeholder="请输入门店名称"
              suffix-icon="search"
            />
            <el-button type="primary" @click="handelSearch">确认</el-button>
          </div>
        </div>
      </el-form>
      <div class="ele-table">
        <el-table
          ref="storeTable"
          v-loading="dialogShow"
          height="400"
          :data="hospitalStoreList"
          :header-cell-style="getRowClass"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column label="门店" prop="storeName" width="200" />
          <el-table-column label="门店地址" prop="address" />

          <el-table-column label="管理员" prop="userName" />

          <!--          <el-table-column label="操作" align="center" header-align="right">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                @click="handelAddRows(scope.row)"
              >添加</el-button>
            </template>
          </el-table-column>-->
        </el-table>
      </div>
      <div class="ele-footer">
        <div class="left">
          <el-button plain size="mini" @click="handelAllRow">全选</el-button>
          <el-button plain size="mini" @click="addStore">新增门店</el-button>
          <el-button
            plain
            size="mini"
            @click="handelAllSelect"
          >添加</el-button>
        </div>
        <div class="right">
          <el-pagination
            :current-page="pages.pageIndex"
            :page-sizes="[20, 30, 40, 50]"
            :page-size="pages.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pages.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { storeList } from '@/api/customAPI/shop/store'
import { getCityList } from '@/api/auth'
export default {
  props: {
    visible: { type: Boolean, default: false },
    isSelect: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showHide: false,
      isRelate: 0,
      keySearch: '',
      pages: { pageIndex: 1, pageSize: 20, total: 0 },
      bindataAddCommodity: [],
      pca: {
        // 省区
        province: [],
        // 需要循环遍历的城区和市区
        city: [],
        area: [],
        // 最后拿到的 城区和市区 select 列表
        forCity: [],
        forArea: []
      },
      storeForm: {
        allCity: false,
        provinceId: '',
        provinceName: '',
        cityId: '',
        cityName: '',
        areaId: '',
        areaName: '',
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        keySearch: null
      },
      hospitalStoreList: [],
      selectList: [],
      dialogShow: false
    }
  },
  created() {
    this.loadCity()
  },
  mounted() {
    this.loadTableData()
  },
  activated() {
    this.loadTableData()
  },
  methods: {
    addStore() {
      this.dialogShow = false
      this.$router.push({ name: 'AddStore', query: { p: this.$ed({ state: 'add' }) }})
    },
    /** 刷新 */
    resetForm() {
      const vm = this
      vm.storeForm.areaCode = null
      vm.storeForm.keySearch = null
      vm.reloadTableData()
    },
    reloadTableData() {
      const vm = this

      vm.page = 1
      vm.total = 0
      vm.list = []
      vm.loadTableData()
    },
    loadTableData() {
      const data = {
        searchKey: this.storeForm.searchKey,
        page: this.pages.pageIndex,
        limit: this.pages.pageSize
      }
      if (this.storeForm.provinceCode) {
        data['province'] = this.storeForm.provinceCode
      }
      if (this.storeForm.cityCode) {
        data['city'] = this.storeForm.cityCode
      }
      if (this.storeForm.areaCode) {
        data['area'] = this.storeForm.areaCode
      }
      if (this.storeForm.keySearch) {
        data['searchKey'] = this.storeForm.keySearch
      }
      this.dialogShow = true
      storeList(data).then(result => {
        this.dialogShow = false
        this.hospitalStoreList = result.data.data.list
        if (this.selectList.length > 0) {
          this.hospitalStoreList.forEach(item => {
            this.selectList.forEach(inf => {
              if (item.id == inf.id) {
                this.$nextTick(() => {
                  this.$refs.storeTable.toggleRowSelection(item)
                })
              }
            })
          })
        }
        this.pages.total = result.data.data.total
      }).catch(err => {
        this.dialogShow = false
        console.log(err)
      })
    },
    /**  显示条目
     *  @param size 一页显示的条目
     */
    handleSizeChange(size) {
      this.pages.pageSize = size
      this.loadTableData()
      this.$emit('handleSizeChange', size)
    },
    handelClose() {
      this.$emit('handelClose')
    },
    /** 区 */
    handelArea(v) {
      console.log(v, '区id')
      if (v) {
        this.storeForm.areaName = this.pca.area.find(inf => {
          return inf.code === v
        }).name
        this.storeForm.areaId = this.pca.area.find(inf => {
          return inf.code === v
        }).code
        this.addressName()
      }
    },
    /** 市 */
    handelCity(v) {
      if (v) {
        this.pca.forArea = []
        this.storeForm.areaName = ''
        this.storeForm.areaId = ''
        this.storeForm.areaCode = null
        const cityInfo = this.$XEUtils.find(this.pca.city, item => item.code === v)
        this.pca.area.forEach(inf => {
          if (inf.pid === cityInfo.id) {
            this.pca.forArea.push(inf)
          }
        })
        this.storeForm.cityName = this.pca.city.find(inf => {
          return inf.code === v
        }).name
        this.storeForm.cityId = this.pca.city.find(inf => {
          return inf.code === v
        }).code
        this.addressName()
      }
    },
    /** 省 */
    handelProvince(v) {
      this.pca.forCity = []
      this.pca.forArea = []
      this.storeForm.cityId = ''
      this.storeForm.areaId = ''
      this.storeForm.cityCode = null
      this.storeForm.areaCode = null
      if (v) {
        const provinceInfo = this.$XEUtils.find(this.pca.province, item => item.code === v)
        this.pca.city.forEach(inf => {
          if (inf.pid === provinceInfo.id) {
            this.pca.forCity.push(inf)
          }
        })

        this.storeForm.cityName = ''
        this.storeForm.areaName = ''
        this.storeForm.detailAddress = ''
        this.storeForm.provinceName = this.pca.province.find(inf => {
          return inf.code === v
        }).name
        this.storeForm.provinceId = this.pca.province.find(inf => {
          return inf.code === v
        }).id
        this.storeForm.provinceCode = this.pca.province.find(inf => {
          return inf.code === v
        }).code
        this.addressName()
      }
    },
    /**  当前页
     *  @param index 显示页
     */
    handleCurrentChange(index) {
      this.pages.pageIndex = index
      this.loadTableData()
      this.$emit('handleCurrentChange', index)
    },
    /**  搜索
     *  @param val 搜索值
     */
    handelSearch() {
      this.reloadTableData()
    },
    handelAllSelect() {
      console.log(this.allSelect)
      if (this.allSelect.length > 0) {
        this.resetForm()
        this.$emit('handelAllSelect', this.allSelect)
        this.dialogShow = false
      } else {
        this.$message.warning('请先选择')
      }
    },
    /**  添加
     *  @param row 行数据
     */
    handelAddRows(row) {
      this.$emit('handelAddRows', row)
    },
    handelAllRow() {
      this.$refs.storeTable.toggleAllSelection()
    },
    handleSelectionChange(row) {
      this.allSelect = row
      this.$emit('selectionChange', row)
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else {
        return ''
      }
    },
    getProvinceAndCity(province, city) {
      /* this.province = province
      this.city = city*/
      this.storeForm.provinceCode = province
      this.storeForm.cityCode = city
      this.storeForm.provinceId = this.pca.province.find(inf => {
        return inf.code === this.storeForm.provinceCode
      }).id
      this.storeForm.provinceName = this.pca.province.find(inf => {
        return inf.code === this.storeForm.provinceCode
      }).name
      console.log(this.pca.city)
      this.pca.city.forEach(inf => {
        if (inf.pid === this.storeForm.provinceId) {
          this.pca.forCity.push(inf)
        }
      })
      this.storeForm.cityId = this.pca.city.find(inf => {
        return inf.code === this.storeForm.cityCode
      }).id
      this.storeForm.cityName = this.pca.city.find(inf => {
        return inf.code === this.storeForm.cityCode
      }).name
      this.pca.area.forEach(inf => {
        if (inf.pid === this.storeForm.cityId) {
          this.pca.forArea.push(inf)
        }
      })
      this.reloadTableData()
      /* this.$refs.citySelect.setAddress(province,city,null)*/
    },
    /** 初始地址 */
    loadCity() {
      getCityList()
        .then(result => {
          this.pca.province = []
          this.pca.city = []
          this.pca.area = []
          result.data.data.forEach(inf => {
            this.pca.province.push(inf.province)
            inf.cityRegion.forEach(reg => {
              this.pca.city.push(reg.city) // 拿市区
              reg.village.forEach(vil => {
                this.pca.area.push(vil) // 拿城区
              })
            })
          })
        })
        .catch(err => {
          console.log(err)
        })
    },
    setSelectList(List) {
      this.selectList = List
    }
  }
}
</script>

<style lang="scss" scoped>
.Store {
  ::v-deep.el-dialog {
    .el-dialog__body {
      padding-bottom: 0;
    }
    .cus-data {
      display: flex;
      .left {
        width: 150px;
        height: 150px;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex-grow: 1;
        .form-last-item-0 {
          margin-top: -20px;
          p {
            margin: 0;
          }
        }
        .form-last-item-1 {
          margin-top: 50px;
          .el-button {
            width: 200px;
          }
        }
      }
    }
    // 添加门店的style
    .def-b {
      border-left: 4px solid rgb(55, 131, 255);
      padding-left: 10px;
    }
    .ele-key-search {
      display: flex;
      justify-content: space-between;
      .el-select {
        width: 120px;
      }
      .left {
        .StoreType {
          margin-left: 15px;
        }
      }
      .left,
      .right {
        display: flex;
        justify-content: flex-start;
      }
    }
    .ele-table {
      margin-top: 40px;
      .column-commodity {
        display: flex;
        align-items: flex-start;
        div:first-child {
          width: 60px;
          height: 60px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        div:last-child {
          span {
            margin-left: 20px;
          }
        }
      }
    }
    .ele-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 30px 0px;
      .left {
        .el-button {
          width: 100px;
        }
      }
    }
  }
}
</style>
